<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        prop="id"
        label="任务id"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="title"
        label="标题"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="content"
        label="描述"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="username"
        label="指派给"
        min-width="100"
      />
      <el-table-column align="center" label="状态" width="150">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.feekbackStatus * 1 === 1"
            type="success"
            size="small"
            >已反馈</el-tag
          >
          <el-tag v-else type="danger" size="small">未反馈</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="startTime"
        label="指派时间"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="feekbackTime"
        label="反馈时间"
        min-width="100"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="250"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="clickfankuixx(scope.row)">
            详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getdata"
    />

    <el-dialog title="任务详情" :visible.sync="dialogForminfo" width="80%">
      <taskinfo
        :clickinfo="clickinfo"
        @clicksure="dialogForminfo = false"
      ></taskinfo>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import { getOrgTree } from "@/api/user";
import { save, list, taskfeekbacklist } from "@/api/task";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import dayjs from "dayjs";
import taskinfo from "@/views/component/taskinfo"; // Secondary package based on el-pagination

const defavalue = {
  title: "",
  context: "",
  filename: "",
  fileurl: "",
  selectuser: null,
};
export default {
  components: { Pagination, taskinfo },
  computed: {
    ...mapGetters(["uid"]),
  },
  filters: {},
  data() {
    return {
      dialogForminfo: false,
      userlist: [],
      listQuery: {
        pageNo: 1,
        pageSize: 20,
      },
      listLoading: false,
      total: 0,
      list: [],
      form: {
        id: "",
        title: "",
        context: "",
        filename: "",
        fileurl: "",
        selectuser: null,
      },
      updateing: false,
      dialogFormVisible: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        context: [{ required: true, message: "请输入详情", trigger: "blur" }],
        selectuser: [
          { required: true, message: "请输入视频地址", trigger: "blur" },
        ],
      },
      clickinfo: {},
      fankinfo: {},
      time: undefined,
    };
  },
  // 注销时清除计时器
  beforeDestroy() {
    clearInterval(this.time);
  },
  created() {
    this.getuserlist();
    this.getdata();
    this.timetake();
  },
  methods: {
    getdata() {
      this.listLoading = true;
      let data = { ...this.listQuery, taskStatus: 1 };
      list(data).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
        console.log(this.list);
      });
    },
    // time
    timetake() {
      // 计时器10秒调用一次
      this.time = setInterval(this.changePage, 10000);
    },
    // 页面每隔10秒切换下一页
    changePage() {
      if (this.listQuery.pageNo < this.total / this.listQuery.pageSize) {
        this.listQuery.pageNo++;
      } else {
        this.listQuery.pageNo = 1;
      }
      this.getdata();
    },
    // 反馈详情
    clickfankuixx(item) {
      this.clickinfo = _.cloneDeep(item);
      this.dialogForminfo = true;
    },
    // 获取用户列表
    getuserlist() {
      getOrgTree({}).then((res) => {
        this.userlist = this.threechildren(res.data);
        console.log(this.userlist);
        // x
      });
    },
    threechildren(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length) {
          this.threechildren(data[i].children);
        }
        if (data[i].userList.length) {
          let arr = [...data[i].userList, ...data[i].children];
          data[i].children = arr;
        }
      }
      return data;
    },
    // 反馈详情
    clickfankui(item) {
      // 判断是否反馈
      if (item.feekbackStatus * 1 == 1) {
        // 查询反馈详情
        let data = { pageNo: 1, pageSize: 9999, taskId: item.id };
        taskfeekbacklist(data).then((res) => {
          this.fankinfo = res.data.records[0];
        });
      } else {
        this.fankinfo = undefined;
      }
      console.log(item);
      this.clickinfo = item;
      this.dialogForminfo = true;
    },
    clickadd() {
      this.form = _.cloneDeep(defavalue);
      this.dialogFormVisible = true;
    },
    // 下载文件
    openenther(item) {
      window.open(item);
    },
    beforeAvatarUpload(file) {
      if (this.updateing) {
        return false;
      }
      this.form.filename = file.name;
      this.updateing = true;
      return true;
    },
    beforeremove() {
      this.updateing = false;
    },
    handleAvatarSuccess(res, file) {
      let data = res;
      console.log(data);
      if (data.status == 200) {
        let obj = data.data;
        this.form.fileurl = obj;
      } else {
        this.$message.error(data.msg);
      }
      this.updateing = false;
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 去除空数据
          let datestr = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
          // 获取this.form.selectuser最后一个元素
          let userid = this.form.selectuser[this.form.selectuser.length - 1];
          let params = {
            ...this.form,
            taskDesc: this.form.context,
            startTime: datestr,
            userId: userid,
            creater: this.uid,
            content: this.form.context,
          };
          console.log(params);

          save(params).then((res) => {
            if (res.status == 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.getdata();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.filter-item {
  margin-left: 4px;
  margin-right: 20px;
}
.avaimg {
  width: 50px;
  height: 50px;
}
</style>

